<template>
  <div class="app-container">
    <!--查询-->
    <el-form :inline="true" :model="rewardQuery" class="demo-form-inline">
      <el-form-item label="名字">
        <el-select v-model="rewardQuery.userId" filterable clearable placeholder="输入名字">
          <el-option
            v-for="user in userList"
            :key="user.id"
            :label="user.name"
            :value="user.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="奖励类型">
        <el-select v-model="rewardQuery.type" style="margin-left: 10px;width: 80%" clearable placeholder="可搜索">
          <el-option
            v-for="status in rewardTypeEnum"
            :key="status.value"
            :label="status.label"
            :value="status.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="rewardQuery.status" style="margin-left: 10px;width: 80%" clearable placeholder="可搜索">
          <el-option
            v-for="status in statusEnum"
            :key="status.value"
            :label="status.label"
            :value="status.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>

    <el-button type="primary" @click="handleAddReward">创建奖惩</el-button>

    <el-table :data="rewardList" style="width: 100%;margin-top:30px;" border>
      <el-table-column align="center" prop="name" label="名字" width="180">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="rewardDate" label="奖励时间" width="180">
        <template slot-scope="scope">
          <el-date-picker readonly v-model="scope.row.rewardDate" type="date" placeholder="奖励时间"></el-date-picker>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="money" label="奖金" width="180">
        <template slot-scope="scope">
          {{ scope.row.money }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="reason" label="原因" width="180">
        <template slot-scope="scope">
          {{ scope.row.reason }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="remark" label="结果" width="180">
        <template slot-scope="scope">
          <el-select v-model="scope.row.type" disabled style="width: 80%" placeholder="奖惩类型">
            <el-option
              v-for="status in rewardTypeEnum"
              :key="status.value"
              :label="status.label"
              :value="status.value">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="remark" label="状态" width="180">
        <template slot-scope="scope">
          <el-select v-model="scope.row.status" disabled style="width: 80%" placeholder="状态">
            <el-option
              v-for="status in statusEnum"
              :key="status.value"
              :label="status.label"
              :value="status.value">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="handleEdit(scope)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <!-- 分页 -->
      <el-pagination
        :current-page="page"
        :page-size="limit"
        :total="total"
        style="padding: 30px 0; text-align: center;"
        layout="total, prev, pager, next, jumper"
        @current-change="getRewards"
      />
    </div>

    <el-dialog :visible.sync="dialogVisible" :title="dialogType==='edit'?'Edit Reward':'New Reward'">
      <el-form :model="reward" label-width="80px" label-position="left">
        <el-form-item label="奖惩人员" v-if="dialogType==='new'">
          <el-select v-model="userIds" filterable multiple placeholder="输入名字">
            <el-option
              v-for="user in userList"
              :key="user.id"
              :label="user.name"
              :value="user.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="奖惩时间">
          <el-date-picker
            v-model="reward.rewardDate"
            type="date"
            value-format="timestamp"
            placeholder="时间点">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="奖金">
          <el-input v-model="reward.money" placeholder="奖金"/>
        </el-form-item>
        <el-form-item label="原因">
          <el-input v-model="reward.reason" placeholder="原因"/>
        </el-form-item>
        <el-form-item label="奖惩类型">
          <el-select v-model="reward.type" style="width: 80%" placeholder="请选择">
            <el-option
              v-for="status in rewardTypeEnum"
              :key="status.value"
              :label="status.label"
              :value="status.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="confirmReward">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { batchAddReward, getRewards, modifyReward } from '@/api/reward'
import { deepClone } from '@/utils'
import { getUserList } from '@/api/user'

const defaultReward = {
  id: ''
}

export default {
  name: 'RewardManager',
  components: {},
  data() {
    return {
      reward: Object.assign({}, defaultReward),
      rewardList: [],
      userList: [],
      userIds: [],
      rewardQuery: {},
      statusEnum: [
        {value: 'FALSE', label: "已生效"},
        {value: 'TRUE', label: "未生效"},
      ],
      rewardTypeEnum: [
        {value: 'INTERN', label: "实习生优秀奖"},
        {value: 'FULL', label: "全勤奖"},
        {value: 'CREDIT', label: "突出功绩奖"},
        {value: 'ABSENCE', label: "缺勤惩罚"},
        {value: 'OTHER', label: "其他"},
      ],
      checkStrictly: false,
      total: 100,
      page: 1,
      limit: 20,
      dialogType: 'new',
      dialogVisible: false,
    };
  },
  //方法集合
  methods: {
    async getRewards(page = 1){
      const offset = this.limit * (page - 1);
      const res = await getRewards(this.rewardQuery, offset, this.limit)
      this.rewardList = res.data.rows
      this.total = res.data.total
    },
    onSubmit() {
      this.getRewards()
    },
    async getUserList() {
      const res = await getUserList()
      this.userList = res.data
    },
    handleAddReward() {
      this.userIds = []
      this.reward = Object.assign({}, defaultReward)
      this.dialogType = 'new'
      this.dialogVisible = true
    },
    handleEdit(scope) {
      this.dialogType = 'edit'
      this.dialogVisible = true
      this.checkStrictly = true
      this.reward = deepClone(scope.row)
      this.$nextTick(() => {
        // set checked state of a node not affects its father and child nodes
        this.checkStrictly = false
      })
    },
    async confirmReward() {
      if ('edit' === this.dialogType) {
        await modifyReward(this.reward.id, this.reward)
        for (let index = 0; index < this.rewardList.length; index++) {
          if (this.rewardList[index].id === this.reward.id) {
            this.rewardList.splice(index, 1, Object.assign({}, this.reward))
            break
          }
        }
      } else {
        const length = this.userIds.length
        this.reward.userIds = this.userIds.slice(0, length)
        await batchAddReward(this.reward)
      }
      this.dialogVisible = false
      await this.getRewards()
      this.$notify({
        title: 'Success',
        dangerouslyUseHTMLString: true,
        message: '操作成功',
        type: 'success'
      })
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getRewards()
    this.getUserList()
  }
}

</script>

<style scoped>
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
